import ContextMenu from '@imengyu/vue3-context-menu';
import {
    copyCurrentNodeElements,
    copyCurrentNodeElementsToStickup,
    deleteCurrentNodeElements,
    stickupData,
    leftTopOperate, alignOperate
} from "./nodeElementOperation";
import {currentNodeElements} from "./pageData";

const {horizontalCenter, stickBottom, stickLeft, stickRight, stickTop,verticalCenter} = leftTopOperate;

export function openMenu(e: MouseEvent) {
    //prevent the browser's default menu
    e.preventDefault();
    //show your menu
    const items = [
        {
            label: "复制",
            onClick: () => {
                copyCurrentNodeElementsToStickup();
            }
        },
        {
            label: "粘贴",
            onClick: () => {
                stickupData();
            }
        },
        {
            label: "复制并粘贴",
            onClick: () => {
                copyCurrentNodeElements();
            }
        },
        {
            label: "删除",
            onClick: () => {
                deleteCurrentNodeElements();
            }
        },
        {
            label: "位置",
            children: [
                {
                    label: "水平居中",
                    onClick: () => {
                        horizontalCenter();
                    }
                },
                {
                    label: "垂直居中",
                    onClick: () => {
                        verticalCenter();
                    }
                },
                {
                    label: "贴顶部",
                    onClick: () => {
                        stickTop();
                    }
                },
                {
                    label: "贴底部",
                    onClick: () => {
                        stickBottom();
                    }
                },
                {
                    label: "画布中心",
                    onClick: () => {
                        horizontalCenter();
                        verticalCenter();
                    }
                },
                {
                    label: "贴左边",
                    onClick: () => {
                        stickLeft();
                    }
                },
                {
                    label: "贴右边",
                    onClick: () => {
                        stickRight();
                    }
                }
            ]
        },

        {
            label: "对齐",
            disabled: currentNodeElements.value.length < 2,
            children: [
                {
                    label: "居中对齐",
                    icon: "icon-juzhongduiqi",
                    iconClass: "iconfont",
                    onClick: () => {
                        alignOperate.horizontalCenter();
                    }
                },
                {
                    label: "垂直对齐",
                    iconClass: "iconfont",
                    icon: "icon-chuizhiduiqi",
                    onClick: () => {
                        alignOperate.verticalCenter();
                    }
                },
                {
                    label: "左对齐",
                    iconClass: "iconfont",
                    icon: "icon-zuoduiqi",
                    onClick: () => {
                        alignOperate.left();
                    }
                },
                {
                    label: "右对齐",
                    iconClass: "iconfont",
                    icon: "icon-youduiqi",
                    onClick: () => {
                        alignOperate.right();
                    }
                },
                {
                    label: "顶对齐",
                    iconClass: "iconfont",
                    icon: "icon-dingduiqi",
                    onClick: () => {
                        alignOperate.top();
                    }
                },
                {
                    label: "底对齐",
                    iconClass: "iconfont",
                    icon: "icon-diduiqi",
                    onClick: () => {
                        alignOperate.bottom();
                    }
                }
            ]
        }
    ]
    ContextMenu.showContextMenu({
        x: e.clientX,
        y: e.clientY,
        items
    });
}
